<html>

<head>
	<!-- Required global variables for the time line lib -->
	<script>
		Timeline_ajax_url = "http://localhost:8000/src/ajax/api/simile-ajax-api.js";
		Timeline_urlPrefix = "http://localhost:8000/src/webapp/api/";
		Timeline_parameters = "bundle=true";
	</script>
	
	<!-- Include the timeline lib -->
	<script src="http://localhost:8000/src/webapp/api/timeline-api.js" type="text/javascript"></script>
	
	<!-- Test data -->
	<script>
		var eventData = {
			'dateTimeFormat':		"Gregorian",
			'events': [
				{
				'title':			"Punctual Event 1",
				'description':		"I am just appearing here",
				'durationEvent':	false,
				'start':			"Sat, Apr 23 2011 00:00:00 GMT-0600"
				},{
				'title':			"Punctual Event 2",
				'description':		"I am just appearing here",
				'durationEvent':	false,
				'start':			"Sat, Apr 23 2011 00:00:00 GMT-0600"
				},{
				'title':			"Punctual Event 3",
				'description':		"I am just appearing here",
				'durationEvent':	false,
				'start':			"Mon, Apr 18 2011 00:00:00 GMT-0600"
				},{
				'title':			"Duration Event 1",
				'description':		"I instead take some time span",
				'durationEvent':	true,
				'start':			"Mon, Apr 11 2011 00:00:00 GMT-0600",
				'end':				"Mon, Apr 18 2011 00:00:00 GMT-0600"
				},{
				'title':			"Duration Event 2",
				'description':		"I instead take some time span",
				'durationEvent':	true,
				'start':			"Wed, Apr 20 2011 00:00:00 GMT-0600",
				'end':				"Sun, Apr 24 2011 00:00:00 GMT-0600"
				},{
				'title':			"Duration Event 3",
				'description':		"I instead take some time span",
				'durationEvent':	true,
				'start':			"Wed, Apr 20 2011 00:00:00 GMT-0600",
				'end':				"Sun, Apr 24 2011 00:00:00 GMT-0600"
				},{
				'title':			"Duration Event 4",
				'description':		"I instead take some time span",
				'durationEvent':	true,
				'start':			"Wed, Apr 27 2011 00:00:00 GMT-0600",
				'end':				"Sat, May 14 2011 00:00:00 GMT-0600"
				},{
				'title':			"Duration Event 5",
				'description':		"I instead take some time span",
				'durationEvent':	true,
				'start':			"Mon, May 16 2011 00:00:00 GMT-0600",
				'end':				"Mon, May 23 2011 00:00:00 GMT-0600"
				}]
		};
	</script>
	
	<!-- Define onload and onresize functions and show timeline -->
	<script>
		var timeline;
		var resizeTimerID = null;
		
		function onload() {
			var eventSource = new Timeline.DefaultEventSource();
			var bandInfos = [
				Timeline.createBandInfo({
					eventSource:	eventSource,
					width:          "70%", 
					intervalUnit:   Timeline.DateTime.MONTH, 
					intervalPixels: 100
				}),
				
				Timeline.createBandInfo({
					eventSource:	eventSource,
					width:          "30%", 
					intervalUnit:   Timeline.DateTime.YEAR, 
					intervalPixels: 200,
					layout:			"overview"
				})
			];
			bandInfos[1].syncWith = 0;
			bandInfos[1].highlight = true;
			
			timeline = Timeline.create(document.getElementById("test-timeline"), bandInfos);
			timeline.showLoadingMessage();
			console.log(eventData);
			eventSource.loadJSON(eventData, document.location.href);
			timeline.hideLoadingMessage();
		}

		function onResize() {
			if (resizeTimerID == null) {
				resizeTimerID = window.setTimeout(function() {
					resizeTimerID = null;
					timeline.layout();
				}, 500);
			}
		}
	</script>
</head>

<body onload="onload()" onresize="onresize()">
	<div id="test-timeline" style="height: 150px; border: 1px solid #000"></div>
</body>

</html>